<template>
  <div class="app-container bor">
    <div class="mb-20">
      <el-button
        class="btn-active"
        icon="el-icon-plus"
        size="mini"
        @click="addJudge"
      >新增判读</el-button>
      <!-- <el-button class="btn-active" icon="el-icon-plus" size="mini"
        >导入</el-button
      >
      <el-button class="btn-active" icon="el-icon-plus" size="mini"
        >导出</el-button
      > -->

    </div>
    <!-- <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="">
          <el-input placeholder="参数名称" v-model="form.person" />
        </el-form-item>
        <el-form-item label="">
          <el-input placeholder="参数代号" v-model="form.name" />
        </el-form-item>
        <el-form-item label="">
          <el-button size="mini" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <el-table
      v-loading="listLoading"
      :data="judgeList"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
    >
      <!-- <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column> -->
      <el-table-column label="参数代号">
        <template slot-scope="scope">
          {{ scope.row.parmCode }}
        </template>
      </el-table-column>
      <el-table-column label="参数名称">
        <template slot-scope="scope">
          {{ scope.row.parmName }}
        </template>
      </el-table-column>
      <el-table-column label="判读上限">
        <template slot-scope="scope">
          {{ scope.row.ceiling }}
        </template>
      </el-table-column>
      <el-table-column label="判读上限">
        <template slot-scope="scope">
          {{ scope.row.lower }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="220"
      >
        <template slot-scope="scope">
          <!-- <el-button class="detail" icon="el-icon-edit-outline" @click="goEdit(scope.row)">编辑</el-button> -->
          <!-- <el-button
            class="detail"
            icon="el-icon-refresh-right"
          >详情</el-button> -->
          <el-button
            icon="el-icon-remove"
            type="primary"
            size="mini"
            @click="delRow(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增判读" :visible.sync="dialogFormVisible" width="600px" :modal="false">
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item label="">
              <el-select
                v-model="form.parmId"
                placeholder="请选择"
                style="width: 90%"
                @change="getVal"
              >
                <el-option
                  v-for="item in list2"
                  :label="item.parmName"
                  :value="item.parmId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <el-input
                v-model="form.ceiling"
                placeholder="参数上限"
                style="width: 90%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <el-input
                v-model="form.lower"
                placeholder="参数下限"
                style="width: 90%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="center">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    list2: {
      type: Array,
      default() {
        return []
      }
    },
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {},
      dialogJudgeVisible: false,
      list: null,
      dialogFormVisible: false,
      listLoading: false,
      judgeList: []
    }
  },
  watch: {
    info: {
      // console.log(val, 0)

      handler: function(val, oldVal) {
        const that = this
        console.log(val.sceneInterpretationParmsList, 0)
        if (!val.sceneInterpretationParmsList) {
          that.judgeList = []
        } else {
          console.log(val.sceneInterpretationParmsList, 0)
          that.judgeList = val.sceneInterpretationParmsList
        }
      },
      'deep': true,
      'immediate': true

    }
  },
  created() {
    // this.fetchData()
  },
  methods: {
    delRow(index) {
      console.log(index)
      this.judgeList.splice(index, 1)
    },
    getVal(val) {
      console.log(val)
      this.form.parmCode = this.list2.filter(item => item.parmId == val)[0].parmCode
      this.form.parmName = this.list2.filter(item => item.parmId == val)[0].parmName
    },
    goEdit(row) {
      this.dialogFormVisible = true
      this.form = row
    },
    submitForm() {
      // alert(9)
      this.judgeList.push(this.form)
      this.$emit('data', { info: this.info, data: this.judgeList })
      console.log(this.judgeList)
      this.dialogFormVisible = false
    },
    addJudge() {
      this.dialogFormVisible = true
      this.form = {}
    },
    fetchData() {
      this.listLoading = true
      getList().then((response) => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep {.detail.el-button {
  padding: 9px 4px;
}
}
::v-deep { input {
  // width: 80%;
}
}
.el-select {
  // width: 460px;
}
::v-deep { .v-modal {
  background: none;
}
}
::v-deep { .el-dialog {
  color: white;
  background: rgb(3, 28, 43);
  .el-dialog__title,
  .el-form-item__label {
    color: white;
  }
}
}
</style>
